<template>
    <div>
        <p>{{a}}</p>
        <p><input type="button" @click="tap" value="click"></p>
        <p><input type="button" @click="modifyShow" value="show modify"></p>
    </div>
</template>
<script>
    let modify = false
    let big = ""
    export default {
        name: "User",
        data:function (){
            let r = {
                a:1
            }
            // r.update = r
            big = r
            return r
        },
        watch:{
          "update":{
              handler(newVal) {
                  modify = true
                  console.log('Modify',big)
              },
              immediate: true,
              deep: true
          }
        },
        mounted(){
            modify = false
        },
        methods:{
            tap(){
                this.a++
                console.log('Modify',big)
            },
            modifyShow(){
                console.log(modify)
            }
        }
    }
</script>